<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/doctor/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24" @click="getData">
						筛选
					</view>
				</view>
			</view>
			<!-- 切换标签 -->
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="whole data">
					<view class="item" v-for="(item,index) in dataList" :key="index" v-if="dataList.length > 0">
						<view class="left">
							<view class="title font28 font500">
								<!-- {{item.nickName}}{{item.phone}} -->
								创建时间:{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}
							</view>
							<view class="y">
								<view class="text font28 font500">

								</view>
							</view>
						</view>
						<view class="k_info">
							<view class="d_info">
								<view class="d_name">
									用户:{{item.user.nickName}}
								</view>
								<view class="d_phone">
									联系:{{item.user.phone}}
								</view>
							</view>
							<view class="c_status">
								<view class="status font26">
									健康状况
								</view>
								<view class="shop font26">
									{{item.state}}
								</view>
							</view>
						</view>
						<view class="tips">
							<view class="collapse">
								<l-collapse :accordion="true" @click="click">
									<l-collapse-item title="健康方案" titleImg="" :titleImgs="false">
										<view class="contents">
											{{item.suggest}}
										</view>
									</l-collapse-item>
								</l-collapse>
							</view>
						</view>
					</view>
					<view class="font32 fontw" style="color:#969696;text-align: center;" v-else>
						暂无数据
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [], //数据
				scrollTop: 0, //初始化滚动高度
				info: {
					phone: '',
					page: 1,
					pageSize: 10
				}
			}
		},
		components: {

		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const data = await this.$api.doctor.wallness_record(this.info)
				this.dataList = data
			},
			click(e) {
				console.log(e);
			},
			searchValue(e) {
				this.info.phone = e.detail.value
			},
			scrolltolower() {
				let p = Number(this.info.page)
				let pS = Number(this.info.pageSize)
				let costr = p * pS
				if (this.list.length < costr) {
					uni.showToast({
						icon: 'error',
						title: '暂无更多',
						duration: 1000
					})
				} else {
					this.info.page = p + 1
					this.getData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}

			.tabs {

				// /deep/.uv-sticky {
				// 	// width: 50%;

				// 	.uv-tabs__wrapper__nav__item {
				// 		width: 200rpx;
				// 	}

				// 	.uv-tabs__wrapper__nav {
				// 		// justify-content: space-between;
				// 	}
				// }
			}
		}

		.box {
			padding: 16rpx 29rpx;

			.scroll-Y {
				height: calc(100vh - 202rpx - var(--status-bar-height));

				.data {
					.item {
						padding: 35rpx 23rpx 40rpx 38rpx;
						background-color: #fff;
						margin-bottom: 15rpx;

						.left {
							justify-content: space-between;
							border-bottom: 2rpx solid #C6C6C6;
							padding-bottom: 26rpx;

							.title {}

							.y {
								display: flex;
								align-items: center;

								.text {
									color: #1EB481;
									margin-right: 8rpx;
								}

								.icon {
									width: 13rpx;
									height: 24rpx;
									display: flex;
									align-items: center;

									image {
										width: 13rpx;
										height: 24rpx;
									}
								}
							}
						}

						.k_info {
							padding: 37rpx 0 38rpx 0;
							border-bottom: 2rpx solid #C6C6C6;
							display: flex;
							align-items: center;

							.d_info {
								width: 50%;
								border-right: 2rpx solid #C6C6C6;

								.d_name {
									margin-bottom: 16rpx;
								}

								.d_phone {}
							}

							.c_status {
								padding-left: 57rpx;
								width: 50%;

								.status {
									margin-bottom: 16rpx;
								}

								.shop {}
							}
						}

						.tips {
							.collapse {
								/deep/.l-collapse-item {
									.l-collapse-item__title {
										.l-collapse-item__title-wrap {
											.l-collapse-item__title-box {
												.l-collapse-item__title-img {
													width: 0;
												}

												.l-collapse-item__title-text {
													color: #1EB481;
												}
											}
										}
									}
								}

								.contents {
									padding: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>